<template>
  <div style="">
    <div class="user-top-bar">
      <div class="user-top-content center" @click.prevent.stop="goPath('user')">
        <div class="user-top-img">
          <img :src="url" alt="">
        </div>
        <div class="user-to-login">
          屠华
        </div>
      </div>
    </div>
    <div class="menu-flex">
      <flexbox :gutter="0">
        <flexbox-item>
          <div class="flex-content disabled" @click.prevent.stop="goPath('monitor')">
            <i class="icon icon-listyujingxitong blue-icon"></i>
            <p>监控预警</p>
          </div>

        </flexbox-item>

        <flexbox-item>

          <div class="flex-content" @click.prevent.stop="goPath('contrast')">
            <i class="icon icon-tongjifenxi orange-icon"></i>
            <p>统计分析</p>
          </div>

        </flexbox-item>

        <flexbox-item>
          <div class="flex-content" @click.prevent.stop="goPath('equipment')">
            <i class="icon icon-shebeiguanli red-icon"></i>
            <p>设备管理</p>
          </div>
        </flexbox-item>
      </flexbox>
      <flexbox :gutter="0">

        <flexbox-item>

          <div class="flex-content" @click="goPath('amap')">
            <i class="icon icon-xunjianguanli green-icon"></i>
            <p>地图展示</p>
          </div>
        </flexbox-item>

        <flexbox-item>

          <div class="flex-content">
            <i class="icon icon-shequ skyBlue-icon"></i>
            <p>网络社区</p>
          </div>

        </flexbox-item>
        <flexbox-item>

          <div class="flex-content">
            <i class="icon icon-shebeixunjian yellow-icon"></i>
            <p>设备巡检</p>
          </div>

        </flexbox-item>
      </flexbox>
    </div>


  </div>
</template>
<script>
  import { Flexbox, FlexboxItem, Blur,Icon } from 'vux'

  export default {
    components: {
      Blur,
      Flexbox,
      Icon,
      FlexboxItem
    },
    data () {
      return {
        url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509701213380&di=6d400d1d05ce74c17e88be9ee04175d6&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D8e0879e8f2198618554ae7c722844406%2F377adab44aed2e73b6c77aa58d01a18b87d6fa09.jpg'
      }
    },
    methods:{
      goPath(name){
        this.$router.push({
          name: name
        });
      }
    }
  }
</script>

<style scoped>
  .user-top-bar{
    height: 6.8rem;
    background: url("../assets/img/user-bg.jpg") no-repeat;
    background-size: cover;
  }
  .center {
    text-align: center;
    padding-top: 2rem;
    color: #fff;
    font-size: 18px;
    font-weight: 100;
  }
  .center img {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 2px solid #fff;
  }
  .vux-flexbox .vux-flexbox-item{
    border: 1px solid #f6f6f6;
    background: #fff;
    text-align: center;
    font-size: 16px;
  }
  .vux-flexbox .vux-flexbox-item a{
    color: #000;
  }
  .vux-flexbox .vux-flexbox-item:not(:first-child){
    margin-left: -1px;
  }
  .menu-flex{

  }
  .vux-flexbox:not(:first-child){
    margin-top: -1px;
  }
  .vux-flexbox-item .icon{
    font-size: 40px;
  }

  .vux-flexbox-item p{
    margin-top: 10px;
  }
  .flex-content{
    height: 100%;
    padding: 1.2rem 0;
  }

  .disabled{
    background: #f6f6f6;
  }
</style>
